{% extends 'style/base/base.html' %}{% load staticfiles %}
{% block style %}
{{ block.super }}
{% endblock style %}
  {% block content-header %}
    <section class="content-header">
      <h1>
        顾客列表
        <small>操作面板</small>
      </h1>
      <ol class="breadcrumb">
        <li><a href="#"><i class="fa fa-dashboard"></i> 首页</a></li>
        <li class="active">顾客列表</li>
      </ol>
    </section>
  {% endblock content-header %}
  {% block content %}
    <hr>
    <section class="content">
      <div class="col-sm-12">
        <div class="box box-primary">
          <div class="box-header with-border">
            <h4>
              顾客信息列表 <small> 显示所有顾客信息, 显示为None的表示无相应信息</small>
            </h4>

          </div>        
        <table id="customer_list" lay-filter="test"></table>
        
        {% if form %}
          <form action="/customer/add" class="form-horizontal" method="POST">
            <div class="box-body">
            <!-- Custom Tabs -->
              <div class="nav-tabs-custom">
                <ul class="nav nav-tabs">
                  <li class="active"><a href="#tab_1" data-toggle="tab" aria-expanded="true">基本资料</a></li>
                  <li class=""><a href="#tab_2" data-toggle="tab" aria-expanded="false">扩展资料</a></li>
                  <li class=""><a href="#tab_3" data-toggle="tab" aria-expanded="false">备注信息</a></li>
                </ul>
          <div class="tab-content">
            <div class="tab-pane active" id="tab_1">
              {% csrf_token %}

              {% for field in form %}
                {% if  field.name not in ex_list %}
                <div class="form-group">
                  <label class="col-sm-1 control-label">{{ field.label_tag }}</label>
                  <div class="col-sm-5">
                      {{ field }}
                  </div>
                  {{ field.errors }}
                </div>
                {% endif %}
              {% endfor %}

            </div>
            <!-- /.tab-pane -->
            <div class="tab-pane" id="tab_2">
              {% for field in form %}
                {% if  field.name in ex_list and field.name != 'customer_memo' %}
                  <div class="form-group">
                    <label class="col-sm-1 control-label">{{ field.label_tag }}</label>
                    <div class="col-sm-5">
                      {{ field }}
                    </div>
                    {{ field.errors }}
                  </div>
                {% endif %}
              {% endfor %}
            </div>
            <!-- /.tab-pane -->
            <div class="tab-pane" id="tab_3">
                <div class="form-group">
                  <label class="col-sm-1 control-label">{{ form.customer_memo.label_tag }}</label>
                  <div class="col-sm-9">
                    {{ form.customer_memo }}
                  </div>
                  {{ form.customer_memo.errors }}
                </div>
            </div>
            <!-- /.tab-pane -->
          </div>
          <!-- /.tab-content -->
        </div>
        <!-- nav-tabs-custom -->
      </div>
            <div class="box-footer">
              <input class="btn btn-primary" type="submit" value="添加">
            </div><!-- /.col -->
          </form>
        {% endif %}
        </div>
      </div>
    </section>
  {% endblock content %}
{% block script %}
{{ block.super }}
  <script>    
    // layui表格
    layui.use('table', function(){
      var table = layui.table;
      table.render({
        elem:'#customer_list',
        url: '{% url "customers:customer_list_api" %}',
        page: true,
        cols: [[ //表头定义
        {field: 'customer_name', title: '姓名', sort: true},
        {field: 'customer_source', title: '客源', sort: true},
        {field: 'customer_gender', title: '性别', sort: true},
        {field: 'customer_birthday', title: '生日', sort: true},
        {field: 'customer_mobile', title: '手机', sort: true},
        {field: 'customer_qq', title: 'QQ', sort: true},
        {field: 'customer_weixin', title: '微信', sort: true},
        {field: 'customer_joindate', title: '加入日期', sort: true},
        {field: 'customer_vocation', title: '推荐人', sort: true},
        ]]
      })
    })
  </script>
{% endblock script %}
